<template>
  <div style="width:400px;margin-top:-35px;">
    <div class="main-warp">
      <dv-border-box-7 style="width:400px;padding:25px;">
        <div class="head">
          <i class="iconfont icon-paiming"></i>
          <div class="title">成都市今日问政数据</div>
        </div>
        <div class="content">
          <div ref="bar" style="width:400px;height:300px;"></div>
        </div>

        <div class="head" style="margin-top:-30px;">
          <i class="iconfont icon-huizongshuju"></i>
          <div class="title">群众呼声总数据</div>
        </div>
        <div class="allCount">

          <div class="countItem">
            <div class="icon">
              <i class="iconfont icon-w_xinjian"></i>
            </div>
            <div class="c">
              <div class="title">总共收到</div>
              <div class="num" style="display:flex;;">
                <dv-digital-flop :config="config" style="width:255px;height:50px;"/>
              </div>
            </div>
          </div>


          <div class="countItem">
            <div class="icon">
              <i class="iconfont icon-renzheng"></i>
            </div>
            <div class="c">
              <div class="title">认证机构</div>
              <div class="num">
                <dv-digital-flop :config="config2" style="width:255px;height:50px;"/>
              </div>
            </div>
          </div>

        </div>
      </dv-border-box-7>
    </div>
  </div>
</template>

<script>
import {getAllcount} from '@/utils/api/data'
import Wordcloud from "@/components/common/Wordcloud";
const formatter = function (number) {
  const numbers = number.toString().split('').reverse()
  const segs = []

  while (numbers.length) segs.push(numbers.splice(0, 3).join(''))

  return segs.join(',').split('').reverse().join('')
}
export default {
  name: 'Citys',
  data() {
    return {

      config: {},
      config2: {},
      timer: '',
    };
  },
  mounted() {
    this.initChart();
    this.Count()
    this.fetchData();
  },
  components: {
    Wordcloud,
  },
  methods: {
    fetchData(){
      getAllcount().then(r=>{

      })
    },
    Count() {
      let _this = this;
      this.config = {
        number: [123456],
        content: '{nt}',
        textAlign: 'left',
        style: {
          fontSize: 50,
          fill: '#d3e4ff',
          fontFamily: "number",
          fontWeight: 'bolder'
        },
        formatter
      }
      this.config2 = {
        number: [594171],
        content: '{nt}',
        textAlign: 'left',
        style: {
          fontSize: 50,
          fill: '#d3e4ff',
          fontFamily: "number",
          fontWeight: 'bolder'
        },
        formatter
      }
      this.timer = setInterval(function () {
        _this.config.number[0] = _this.config.number[0] + Math.floor(Math.random() * 100) + 1;
        _this.config = {..._this.config};
        _this.config2.number[0] = _this.config2.number[0] + Math.floor(Math.random() * 100) + 1;
        _this.config2 = {..._this.config2};
      }, 3000)
    },
    initChart() {
      let colorList = [
        {
          colorStart: 'rgba(107, 116, 228, 1)',
          colorEnd: '#819cd9'
        },
        {
          colorStart: 'rgba(67, 145, 244, 1)',
          colorEnd: '#819cd9'
        },
        {
          colorStart: 'rgba(56, 187, 229, 1)',
          colorEnd: '#819cd9'
        },
        {
          colorStart: 'rgba(105, 214, 253, 1)',
          colorEnd: '#819cd9'
        },
        {
          colorStart: 'rgba(54, 198, 160, 1)',
          colorEnd: '#819cd9'
        }
      ]
      let Piedata = [
        {value: 1048, name: '收件量'},
        {value: 735, name: '办结量'},
        {value: 580, name: '按时办结量'},
        {value: 484, name: '超期件'},
        {value: 300, name: '不满意件'}
      ]
      let options = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          left: '0',
          top: '20px',
          align: 'left',
          itemStyle: {
            fontcolor: '#fff',
          },
          textStyle: {
            color: '#fff'
          }
        },
        series: [
          {
            name: "pie2d",
            type: "pie",
            radius: ['70%', '100%'],
            center: ['43%', '80%'],
            // adjust the start and end angle
            startAngle: 180,
            endAngle: 360,
            label: {
              show: false,
            },
            itemStyle: {
              normal: {
                borderColor: '#FFFFFF', borderWidth: 1,
                color: (list) => {
                  colorList
                  return new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
                    {
                      offset: 0,
                      color: colorList[list.dataIndex]['colorStart']
                    },
                    {
                      offset: 1,
                      color: colorList[list.dataIndex]['colorEnd']
                    }
                  ])
                }
              }
            },
            data: Piedata
          }
        ]
      };
      this.chart = this.$echarts.init(this.$refs.bar)
      this.chart.setOption(options, true)
    }
  }
}
</script>
<style lang="scss" scoped>

@import '@/assets/scss/thread.scss';

.allCount {
  padding-top: 20px;

  .countItem {
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    .icon {
      width: 100px;
      margin-right: 10px;

      .iconfont {
        line-height: 100px;
        font-size: 80px;
        background-image: -webkit-linear-gradient(top, #d3e4ff, #819cd9);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;

      }
    }

    &:last-child {
      margin-bottom: 0;

      .iconfont {
        background-image: -webkit-linear-gradient(top, #dfdbd8, #d9290c)
      }
    }

    .num {
      margin-top: 5px;
    }
  }
}
</style>
